<!DOCTYPE html>
<html lang="zh-CN" data-i18n-title="system.title">
<head>
    <meta charset="utf-8">
    <title data-i18n="system.title">xxpay 聚合支付运营平台</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="/static/src/lib/layui-v2.5.5/css/layui.css" media="all">
    <style>
        .demo-container {
            padding: 20px;
            max-width: 1200px;
            margin: 0 auto;
        }
        .demo-section {
            margin-bottom: 30px;
            padding: 20px;
            border: 1px solid #e6e6e6;
            border-radius: 5px;
        }
        .demo-title {
            font-size: 18px;
            font-weight: bold;
            margin-bottom: 15px;
            color: #333;
        }
        .language-info {
            background: #f8f8f8;
            padding: 10px;
            border-radius: 3px;
            margin-bottom: 15px;
        }
        .demo-buttons {
            margin: 10px 0;
        }
        .demo-buttons .layui-btn {
            margin-right: 10px;
            margin-bottom: 10px;
        }
        .demo-table {
            margin-top: 15px;
        }
        .demo-form {
            margin-top: 15px;
        }
        .demo-form .layui-form-item {
            margin-bottom: 15px;
        }
    </style>
</head>
<body>
    <div class="demo-container">
        <!-- 页面标题 -->
        <div class="layui-row">
            <div class="layui-col-md12">
                <h1 data-i18n="system.name">运营平台</h1>
                <p data-i18n="system.welcome">欢迎使用运营平台</p>
            </div>
        </div>

        <!-- 语言切换器演示 -->
        <div class="demo-section">
            <div class="demo-title" data-i18n="lang.switch">切换语言</div>
            <div class="language-info">
                <p><strong data-i18n="lang.current">当前语言</strong>: <span id="current-lang">zh_CN</span></p>
                <p><strong data-i18n="lang.browser">浏览器语言</strong>: <span id="browser-lang">-</span></p>
            </div>
            
            <!-- 下拉菜单样式 -->
            <div class="layui-nav">
                <div id="lang-dropdown"></div>
            </div>
            
            <!-- 按钮样式 -->
            <div style="margin: 15px 0;">
                <div id="lang-buttons"></div>
            </div>
            
            <!-- 链接样式 -->
            <div style="margin: 15px 0;">
                <div id="lang-links"></div>
            </div>
        </div>

        <!-- 菜单演示 -->
        <div class="demo-section">
            <div class="demo-title" data-i18n="menu.title">菜单演示</div>
            <div class="layui-nav layui-nav-tree">
                <li class="layui-nav-item">
                    <a href="javascript:;" data-i18n="menu.dashboard">控制台</a>
                </li>
                <li class="layui-nav-item layui-nav-itemed">
                    <a href="javascript:;" data-i18n="menu.merchant">商户管理</a>
                    <dl class="layui-nav-child">
                        <dd><a href="javascript:;" data-i18n="merchant.list">商户列表</a></dd>
                        <dd><a href="javascript:;" data-i18n="merchant.add">新增商户</a></dd>
                        <dd><a href="javascript:;" data-i18n="merchant.config">商户配置</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:;" data-i18n="menu.order">订单管理</a>
                    <dl class="layui-nav-child">
                        <dd><a href="javascript:;" data-i18n="order.list">订单列表</a></dd>
                        <dd><a href="javascript:;" data-i18n="order.search">订单查询</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:;" data-i18n="menu.report">统计报表</a>
                </li>
            </div>
        </div>

        <!-- 按钮演示 -->
        <div class="demo-section">
            <div class="demo-title" data-i18n="button.demo">按钮演示</div>
            <div class="demo-buttons">
                <button class="layui-btn" data-i18n="btn.add">新增</button>
                <button class="layui-btn layui-btn-primary" data-i18n="btn.edit">编辑</button>
                <button class="layui-btn layui-btn-danger" data-i18n="btn.delete">删除</button>
                <button class="layui-btn layui-btn-normal" data-i18n="btn.save">保存</button>
                <button class="layui-btn layui-btn-warm" data-i18n="btn.search">搜索</button>
                <button class="layui-btn layui-btn-disabled" data-i18n="btn.export">导出</button>
            </div>
        </div>

        <!-- 表单演示 -->
        <div class="demo-section">
            <div class="demo-title" data-i18n="form.demo">表单演示</div>
            <form class="layui-form demo-form">
                <div class="layui-form-item">
                    <label class="layui-form-label" data-i18n="field.name">名称</label>
                    <div class="layui-input-block">
                        <input type="text" class="layui-input" data-i18n="field.name" placeholder="请输入名称">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label" data-i18n="field.type">类型</label>
                    <div class="layui-input-block">
                        <select>
                            <option value="" data-i18n="tip.select">请选择</option>
                            <option value="1" data-i18n="merchant.type.enterprise">企业商户</option>
                            <option value="2" data-i18n="merchant.type.individual">个人商户</option>
                        </select>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label" data-i18n="field.status">状态</label>
                    <div class="layui-input-block">
                        <input type="radio" name="status" value="1" title="启用" data-i18n="status.enabled">
                        <input type="radio" name="status" value="0" title="禁用" data-i18n="status.disabled">
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn" type="submit" data-i18n="btn.submit">提交</button>
                        <button type="reset" class="layui-btn layui-btn-primary" data-i18n="btn.reset">重置</button>
                    </div>
                </div>
            </form>
        </div>

        <!-- 表格演示 -->
        <div class="demo-section">
            <div class="demo-title" data-i18n="table.demo">表格演示</div>
            <table class="layui-table demo-table">
                <thead>
                    <tr>
                        <th data-i18n="field.id">ID</th>
                        <th data-i18n="field.name">名称</th>
                        <th data-i18n="field.status">状态</th>
                        <th data-i18n="field.createTime">创建时间</th>
                        <th data-i18n="field.operation">操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>1</td>
                        <td>示例商户</td>
                        <td><span class="layui-badge layui-bg-green" data-i18n="status.enabled">启用</span></td>
                        <td>2024-01-01 12:00:00</td>
                        <td>
                            <a class="layui-btn layui-btn-xs" data-i18n="btn.edit">编辑</a>
                            <a class="layui-btn layui-btn-danger layui-btn-xs" data-i18n="btn.delete">删除</a>
                        </td>
                    </tr>
                    <tr>
                        <td>2</td>
                        <td>测试商户</td>
                        <td><span class="layui-badge" data-i18n="status.disabled">禁用</span></td>
                        <td>2024-01-02 15:30:00</td>
                        <td>
                            <a class="layui-btn layui-btn-xs" data-i18n="btn.edit">编辑</a>
                            <a class="layui-btn layui-btn-danger layui-btn-xs" data-i18n="btn.delete">删除</a>
                        </td>
                    </tr>
                </tbody>
            </table>
            <div class="layui-box layui-laypage layui-laypage-default">
                <span class="layui-laypage-count" data-i18n="page.total" data-i18n-params='{"total": 2}'>共 2 条记录</span>
            </div>
        </div>

        <!-- 消息演示 -->
        <div class="demo-section">
            <div class="demo-title" data-i18n="message.demo">消息演示</div>
            <div class="demo-buttons">
                <button class="layui-btn" onclick="showSuccess()" data-i18n="btn.success">成功消息</button>
                <button class="layui-btn layui-btn-warm" onclick="showWarning()" data-i18n="btn.warning">警告消息</button>
                <button class="layui-btn layui-btn-danger" onclick="showError()" data-i18n="btn.error">错误消息</button>
                <button class="layui-btn layui-btn-primary" onclick="showInfo()" data-i18n="btn.info">信息消息</button>
            </div>
        </div>
    </div>

    <script src="/static/src/lib/layui-v2.5.5/layui.js"></script>
    <script src="/static/i18n/i18n.js"></script>
    <script src="/static/i18n/zh_CN.js"></script>
    <script src="/static/i18n/en_US.js"></script>
    <script>
        layui.config({
            base: '/static/src/lib/extend/'
        }).extend({
            languageSwitcher: 'languageSwitcher'
        }).use(['element', 'form', 'layer', 'languageSwitcher'], function(){
            var element = layui.element,
                form = layui.form,
                layer = layui.layer,
                languageSwitcher = layui.languageSwitcher;

            // 初始化国际化
            I18n.init();

            // 更新当前语言显示
            document.getElementById('current-lang').textContent = I18n.getLocale();
            document.getElementById('browser-lang').textContent = navigator.language || navigator.userLanguage;

            // 渲染语言切换器
            languageSwitcher.render({
                elem: '#lang-dropdown',
                type: 'dropdown',
                callback: function(lang) {
                    console.log('Language switched to:', lang);
                }
            });

            languageSwitcher.render({
                elem: '#lang-buttons',
                type: 'button',
                autoReload: false,
                callback: function(lang) {
                    setTimeout(function() {
                        location.reload();
                    }, 1000);
                }
            });

            languageSwitcher.render({
                elem: '#lang-links',
                type: 'link',
                autoReload: false,
                callback: function(lang) {
                    setTimeout(function() {
                        location.reload();
                    }, 1000);
                }
            });

            // 重新渲染表单
            form.render();
            element.render('nav');

            // 全局消息函数
            window.showSuccess = function() {
                layer.msg(I18n.t('success.operation'), {icon: 1});
            };

            window.showWarning = function() {
                layer.msg(I18n.t('tip.operation.warning'), {icon: 0});
            };

            window.showError = function() {
                layer.msg(I18n.t('error.operation'), {icon: 2});
            };

            window.showInfo = function() {
                layer.msg(I18n.t('tip.operation.info'), {icon: 6});
            };
        });
    </script>
</body>
</html>
